/**
 * author:LDM
 * date:201810291549
 * select自定义组件
 * 使用1:
 *  <ldmSelect
             :select="selectedData"
             placeholder="请选择你要的option"
             v-model="selectedItem"
             label="name"
             @change="getItem"
             >
    </ldmSelect>
 * 使用2：
 * <ldmSelect
            :select="list"
             v-model="listModel"
            >
  </ldmSelect>
 */
export default {
  name: "ldmSelect",
  model:{
    prop:"selected",
    event:"click"
  },
  props:["selected","select","placeholder","label"],
  data:function () {
    return ({
      refName:'select-'+Math.random(new Date().getTime()),
      isShow:false
    })
  },
  mounted:function () {
    let _this = this;
  },
  created:function(){
    /**
     * 为了实现离开组件有效局域的时候合上下拉框
     */
    let _this = this;
    document.addEventListener('click',function(e){
      _this.hideShow(e);
    })
  },
  methods:{
    hideShow:function(e){
      let _this = this;
      if(!_this.$refs[_this.refName].contains(e.target)){
        _this.isShow = false;
      }
    },
    changeShow:function () {
      let _this = this;
      let isShow = _this.isShow;
      _this.isShow = !isShow;
    },
    checkItem:function (item) {
      let _this = this;
      _this.$emit('click',item);
    }
  },
  watch:{
    selected:function (value) {
      let _this = this;
      _this.$emit('change', value);
      _this.changeShow()

    }
  }
}
